<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps<{
  data: any;
}>();

// 新增：生成20条随机在线资源链接，包含图片、音频、视频和文档
const resourceTypes = ['image', 'video', 'document'];
const imageLinks = Array.from({ length: 30 }, () => {
  const type = resourceTypes[Math.floor(Math.random() * resourceTypes.length)];
  let url = '';

  switch (type) {
    case 'audio': {
      url = `https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3`; // 示例音频链接
      break;
    }
    case 'document': {
      url = `https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf`; // 示例文档链接
      break;
    }
    case 'image': {
      const width = Math.floor(Math.random() * 200) + 100; // 随机宽度在100到300之间
      const height = Math.floor(Math.random() * 200) + 100; // 随机高度在100到300之间
      url = `https://picsum.photos/${width}/${height}?random=${Math.random()}`;
      break;
    }
    case 'video': {
      url = `https://www.w3schools.com/html/mov_bbb.mp4`; // 示例视频链接
      break;
    }
  }

  return { type, url };
});

const onContextMenuClick = (treeKey: string, menuKey: number | string) => {
  console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
};

const current = ref(1);
</script>
<template>
  <a-row :gutter="[8, 8]" class="flex-1 overflow-y-auto">
    <a-col v-for="(link, index) in imageLinks" :key="index" :span="4">
      <div
        class="flex flex-col items-center justify-center rounded bg-gray-100 p-2"
      >
        <div class="flex h-[160px] w-full flex-col">
          <div class="flex-1">
            <template v-if="link.type === 'image'">
              <a-image
                :src="link.url"
                alt="图片"
                class="h-full w-full rounded"
              />
            </template>
            <template v-else-if="link.type === 'audio'">
              <audio :src="link.url" controls></audio>
            </template>
            <template v-else-if="link.type === 'video'">
              <video :src="link.url" controls style="width: 100%"></video>
            </template>
            <template v-else-if="link.type === 'document'">
              <a-button :href="link.url" target="_blank" type="link">
                下载文档
              </a-button>
            </template>
            <template v-else>
              <div>未知文件类型</div>
            </template>
          </div>
          <span class="line-clamp-1">{{ link.url }}</span>
        </div>

        <a-dropdown :trigger="['contextmenu']">
          <template #overlay>
            <a-menu
              @click="
                ({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)
              "
            >
              <a-menu-item key="rename">重命名</a-menu-item>
              <a-menu-item key="delete">删除</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
    </a-col>
  </a-row>
  <div class="flex justify-center pt-1">
    <a-pagination v-model:current="current" :total="50" show-less-items />
  </div>
</template>
